<template>
  <div>
    <f-table ref="orderDrugs" rowKey="orderDetailsId" :params="queryParam" :columns="columns" :api="api.bod" :autoLoad="false" :showPagination="false" :multiple="false">

      <span slot="saleType" slot-scope="text, record">
        <template>
        <span>
          <a-tag v-if="text==1" color="blue">销售</a-tag>
          <a-tag v-if="text==2" color="blue">退货</a-tag>
          <a-tag v-if="text==4" color="blue">票折</a-tag>
          <a-tag v-if="text==3" color="blue">补货</a-tag>
        </span>
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="addTuibu(record,2)" v-if="record.saleType==1">退货</a>
          <a @click="addTuibu(record,3)" v-if="record.saleType==2">补货</a>
          <a-divider type="vertical" v-if="record.saleType==2"/>
          <a @click="deleteTuibu(record,3)" v-if="record.saleType!=1">删除</a>
        </template>
      </span>
    </f-table>

    <a-modal :title="'商品'+title" v-model="detailsModal" v-if="detailsModal" width="610px" height="400px" @cancel="handleCancel" @ok="handleSubmit">
      <f-form ref="tuibuForm" :action="api.bod.addOrderDetails" v-if="detailsModal" :form-key="this.formItem.orderDetailsId">
        <f-form-item :label="title+'数量'" type="number" data-type="number" :disabled='true' name="saleNum" :required="true" :value="formItem.saleNum" :max="formItem.saleNum"/>
        <f-form-item :label="title+'日期'" type="date" name="saleDate" :value="formItem.saleDate"/>
      </f-form>
    </a-modal>
  </div>
</template>

<script>
  import api from './js/api'


  export default {
    name: 'OrderTuibu',
    components: {},
    data() {
      let me = this
      //操作按钮
      let operator = []

      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        saleType: '',
        queryParam: {},
        order: {},
        detailsModal: false,
        formItem: this.getFormItem(),
        operator: operator,
        columns: [{
          title: '供货商',
          align: 'center',
          width: '135px',
          dataIndex: 'supplierName'
        },{
          title: '商品名称',
          align: 'center',
          width: '135px',
          dataIndex: 'drugsName'
        },{
          title: '规格',
          align: 'center',
          width: '135px',
          dataIndex: 'drugsSpec'
        },{
          title: '批号',
          align: 'center',
          width: '135px',
          dataIndex: 'drugsLotNo'
        },{
          title: '类型',
          align: 'center',
          width: '135px',
          dataIndex: 'saleType',
          scopedSlots: { customRender: 'saleType' }
        },{
          title: '数量',
          align: 'center',
          width: '135px',
          dataIndex: 'saleNum'
        },{
          title: '单价',
          align: 'center',
          width: '135px',
          dataIndex: 'salePrice'
        },{
          title: '销售金额',
          align: 'center',
          width: '135px',
          dataIndex: 'saleAmount'
        },{
          title: '操作',
          align: 'center',
          width: 'auto',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }]
      }
    },
    created() {
    },
    computed: {
      title: function() {
        return this.saleType == 2 ? '退货' : '补货'
      }
    },
    methods: {
      getFormItem() {
        return {
          orderDetailsId: '',
          saleDate: '',
          saleNum: ''
        }
      },
      setData(data) {
        if (data && data.orderId) {
          this.queryParam.orderId = data.orderId
          this.order = data
          this.$refs['orderDrugs'].refresh(false)
        }
      },
      addTuibu(record, saleType) {
        this.formItem = record
        this.saleType = saleType
        if (saleType == 3) {
          this.$nextTick(() => {
            if (this.formItem.saleNum < 0) {
              this.formItem.saleNum = this.formItem.saleNum * -1
            }
          })
        }
        this.detailsModal = true
      },
      deleteTuibu(record) {
        this.http.confirm(this, {
          content: '确认删除吗?',
          url: api.bod.deleteTuibu,
          data: {
            orderDetailsId: record.orderDetailsId
          },
          success: function(me, data) {
            me.$refs['orderDrugs'].refresh()
          }
        })
      },
      handleSubmit() {
        let params = {
          orderDetailsId: this.formItem.orderDetailsId,
          saleType: this.saleType
        }
        this.$refs['tuibuForm'].submit(params, this.handleSuccess)
      },
      handleSuccess() {
        this.$refs['orderDrugs'].refresh()
        this.detailsModal = false
      },
      handleCancel() {
        this.detailsModal = false
      }
    }
  }
</script>